<template>
  <!-- <div class="xuekeMulu"> -->
  <el-card>
    <!-- 面包屑 -->
    <div v-if="$route.query.name">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <br />
      <hr />
    </div>
    <!-- 面包屑 e-->
    <!-- 筛选表单区域 -->
    <br />
    <el-row>
      <el-col :span="8">
        <el-form
          :model="queryData"
          label-width="80px"
          label-position="right"
          class="sub-search"
        >
          <el-form-item label="目录名称">
            <el-input
              @change="flag = 0"
              v-model="queryData.directoryName"
              style="width: 200px"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              @change="flag = 0"
              v-model="queryData.state"
              placeholder="请选择"
            >
              <el-option label="已启用" :value="1"></el-option>
              <el-option label="已禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="11">
        <el-button @click="reset" size="small">清除</el-button>
        <el-button @click="search" size="small" type="primary">搜索</el-button>
      </el-col>
      <el-col :span="5" type="flex">
        <span class="pl-right">
          <el-button
            @click="$router.go(-1)"
            v-if="$route.query.name"
            type="text"
            icon="el-icon-back"
            >返回学科</el-button
          >
          <el-button
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="addHandler"
            >新增目录</el-button
          >
        </span>
      </el-col>
    </el-row>
    <!-- 表单筛选区域 e -->
    <el-alert
      :closable="false"
      :title="'数据一共 ' + counts + ' 条'"
      type="info"
      show-icon
    >
    </el-alert>
    <!-- 表格区域 s -->
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="subjectName" label="所属学科"></el-table-column>
      <el-table-column prop="directoryName" label="目录名称"></el-table-column>
      <el-table-column prop="username" label="创建者"></el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="{ row }">
          <span>{{ row.addDate | relativeTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totals" label="面试数量"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">
          <span>{{ row.state == 1 ? "已启用" : "已禁用" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button @click="editState(row)" type="text">{{
            row.state == 0 ? "启用" : "禁用"
          }}</el-button>
          <el-button
            @click="editHandler(row.id)"
            type="text"
            :disabled="row.state == 1"
            >修改</el-button
          >
          <el-button
            @click="delHandler(row.id)"
            type="text"
            :disabled="row.state == 1"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <!-- 分页组件 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[10, 15, 20]"
        :page-size="queryData.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-row>
    <!-- 分页组件 e -->
    <!-- 表格区域 e -->
    <!-- 弹出框 s -->
    <add-dialog @updata="initData" :type="1" ref="addDia"></add-dialog>
    <!-- 弹出框 e -->
  </el-card>
  <!-- </div> -->
</template>

<script>
import {
  getMuluListApi,
  delMuluApi,
  getMuluInfoApi,
  editMuluStateApi,
} from "@/api/Mulu";
import AddDialog from "@/views/xueke/components/add-dialog.vue";
export default {
  name: "XuekeMulu",
  components: {
    AddDialog,
  },
  data() {
    return {
      queryData: {
        page: 1, //页码
        pagesize: 10, //每页数量
        // subjectID: "", //学科id
        directoryName: "", //名称
        // state: 1, //状态 1开启 0关闭
      },
      list: [], //存储列表数据
      counts: 0, //总数
      flag: 0, //判断渲染页面状态 //储存 点击搜索时搜索框内的值
      sName: null,
      sState: null,
    };
  },
  created() {
    if (this.$route.query.id) {
      const id = this.$route.query.id;
      this.queryData.subjectID = id;
    }
    this.initData();
  },
  methods: {
    //点击新增
    addHandler() {
      this.$refs.addDia.showDialog = true;
    },
    //获取数据列表
    async initData() {
      const { counts, items } = await getMuluListApi(this.queryData);
      this.counts = counts;
      this.list = items;
    },
    async handleSizeChange(val) {
      console.log(this.flag); // flag为1时 点击搜索渲染后的的页面 并且没有搜索框里的值没有发生改变
      if (this.flag == 1) {
        this.queryData.pagesize = val;
        return await this.initData();
      } // flag为0时 代表搜索框里的值发生了改变 //声明变量暂时接受搜索框里的值 如果搜索框内有值 就储存在变量里
      let dName = null;
      let dState = null;
      if (this.queryData.directoryName.length > 0) {
        dName = this.queryData.directoryName;
      }
      console.log(dName);
      if (this.queryData.state == 0 || this.queryData.state == 1) {
        dState = this.queryData.state;
      } //搜索框没有值 或者有值不点搜索
      this.queryData.directoryName = this.sName;
      this.queryData.state = this.sState;
      this.queryData.pagesize = val;
      await this.initData();
      this.queryData.directoryName = dName;
      this.queryData.state = dState;
    },
    async handleCurrentChange(val) {
      console.log(this.flag);
      if (this.flag == 1) {
        this.queryData.page = val;
        return await this.initData();
      }
      console.log(this.sName);
      let dName = null;
      let dState = null;
      if (this.queryData.directoryName.length > 0) {
        dName = this.queryData.directoryName;
      }
      if (this.queryData.state == 0 || this.queryData.state == 1) {
        dState = this.queryData.state;
      }
      this.queryData.directoryName = this.sName;
      this.queryData.state = this.sState;
      this.queryData.page = val;
      await this.initData();
      this.queryData.directoryName = dName;
      this.queryData.state = dState;
    },
    //重置搜索框
    reset() {
      if (this.$route.query.id) {
        this.queryData = {
          page: 1, //页码
          pagesize: 10, //每页数量
          subjectID: this.$route.query.id, //学科id
          directoryName: "", //标签名称
        };
      } else {
        this.queryData = {
          page: 1, //页码
          pagesize: 10, //每页数量
          // subjectID: "", //学科id
          directoryName: "", //标签名称
        };
      }
      this.flag = 0;
      this.sName = null;
      this.sState = null;
      this.initData();
    },
    //搜索功能
    async search() {
      this.queryData.page = 1;
      this.queryData.pagesize = 10;
      this.flag = 1;
      await this.initData();
      if (this.queryData.directoryName) {
        this.sName = this.queryData.directoryName;
      }
      if (this.queryData.state) {
        this.sState = this.queryData.sState;
      }
    },
    //修改目录状态
    async editState(val) {
      const state = val.state == 1 ? 0 : 1;
      await editMuluStateApi({
        id: val.id,
        state,
      });
      this.initData();
      this.$message.success("操作成功");
    },
    //点击修改
    async editHandler(id) {
      const res = await getMuluInfoApi(id);
      console.log(res);
      this.$refs.addDia.formData = res;
      this.$refs.addDia.showDialog = true;
    },
    //点击删除
    async delHandler(id) {
      try {
        await this.$confirm("你确定要删除吗", "提示", {
          type: "warning",
        });
      } catch (error) {
        return this.$message("已取消删除操作");
      }
      await delMuluApi(id);
      this.$message.success("删除成功");
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.xuekeMulu {
  .sub-search {
    ::v-deep .el-form-item__label {
      font-weight: 700;
    }
  }
  .pl-right {
    float: right;
  }
}
</style>